.HeroContainer {
	background-image: linear-gradient(
		330deg,
		var(--purple-9) 0%,
		var(--indigo-9) 100%
	);
	padding-block: 100px;
	border-top-left-radius: var(--radius-4);
	border-top-right-radius: var(--radius-4);

	@media (min-width: 1200px) {
		margin-left: calc(-1 * var(--space-7));
		margin-right: calc(-1 * var(--space-7));
	}
}

.DemoContainer {
	@media (min-width: 1200px) {
		margin-left: calc(-1 * var(--space-7));
		margin-right: calc(-1 * var(--space-7));
	}
}

.SandboxButton {
	opacity: 0;
	transition: opacity 80ms ease-out;
}
.SandboxButton:hover,
.SandboxButton:focus {
	opacity: 1;
}

.HeroContainer:hover + .DemoContainer .SandboxButton {
	opacity: 1;
}

.CollapsibleGradient {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 80px;
	padding: var(--space-3);
	overflow: hidden;
	border-radius: 0 0 var(--radius-4) var(--radius-4);
}

.CollapsibleGradient > button {
	z-index: 2;
}

.CollapsibleGradient::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, var(--white-a11) 70%);
	opacity: 0.9;
}

:global(:where(.dark, .dark-theme)) .CollapsibleGradient::before {
	background: linear-gradient(180deg, transparent, var(--gray-1) 70%);
}
